<template>
  <div class="column">
    <!--个人信息-->
    <div class="person-info">
      <img class="info-head" v-bind:src="getPicturePath"
           alt="" width="60" height="60" style="border-radius: 50%">
      <span style="padding-left: 10px;" class="info-nickname">{{ getUserName }}</span>

    </div>
    <!--主菜单-->
    <div class="side-menu">
      <ul>
        <li class="side-li" style="border-top: 1px solid #133f91;">
          <router-link to="/index/home" class="side-a">
            <span class="side-icon" style="background-image: url(static/public/images/side-menu/首页.png)"></span>
            <span class="">首页</span>
          </router-link>
        </li>
        <li class="side-li">
          <router-link to="/index/chat" class="side-a">
            <span class="side-icon" style="background-image:url(static/public/images/side-menu/发校讯通.png)"></span>
            <span class="">家校互动</span>
          </router-link>
        </li>
        <li class="side-li">
          <router-link to="/index/source" class="side-a">
            <span class="side-icon" style="background-image:url(static/public/images/side-menu/资源管理.png)"></span>
            <span class="">资源管理</span>
          </router-link>
        </li>
        <li class="side-li">
          <a href="javascript:void(0)" role="button" class="side-a"
             onclick="var group = $('.side-li-group');
                            group.eq(0).fadeToggle(50);
                            group.eq(1).fadeToggle(100);
                            group.eq(2).fadeToggle(150);
                            group.eq(3).fadeToggle(200);
                            var icon = $(this).children('.side-icon-another');
                            icon.toggleClass('icon-a').toggleClass('icon-b');">
            <span class="side-icon" style="background-image:url(static/public/images/side-menu/作业管理.png)"></span>
            <span class="">作业管理</span>
            <span class="side-icon-another icon-a"></span>
          </a>
        </li>
        <li class="side-li side-li-group">
          <router-link to="/index/collection" class="side-a">
            <span class="side-icon" style="background-image: url(static/public/images/side-menu/作业库.png)"></span>
            <span class="">收藏题库</span>
          </router-link>
        </li>
        <li class="side-li side-li-group">
          <router-link to="/indx/homework_post" class="side-a">
            <span class="side-icon" style="background-image: url(static/public/images/side-menu/作业上传.png)"></span>
            <span class="">作业发布</span>
          </router-link>
         </li>
        <li class="side-li side-li-group">
          <router-link to="/index/homework_check" class="side-a">
            <span class="side-icon" style="background-image: url(static/public/images/side-menu/作业批改.png)"></span>
            <span class="">作业批改</span>
          </router-link>
        </li>
        <li class="side-li side-li-group">
          <router-link to="/index/homework_statistic" class="side-a">
            <span class="side-icon" style="background-image: url(static/public/images/side-menu/作业统计.png)"></span>
            <span class="">作业统计</span>
          </router-link>
        </li>
        <li class="side-li">
          <a href="javascript:void(0);" role="button" class="side-a"
             onclick="var group = $('.side-li-group-another');
                    group.eq(0).fadeToggle(50);
                    group.eq(1).fadeToggle(100);
                    group.eq(2).fadeToggle(150);
                    var icon = $(this).children('.side-icon-another');
                    icon.toggleClass('icon-a').toggleClass('icon-b');">
            <span class="side-icon" style="background-image:url(static/public/images/side-menu/个人中心.png)"></span>
            <span class="">个人中心</span>
            <span class="side-icon-another icon-a"></span>
          </a>
        </li>
        <li class="side-li side-li-group-another">
          <router-link to="/index/course_class" class="side-a">
            <span class="side-icon" style="background-image:url(static/public/images/side-menu/课程管理.png)"></span>
            <span class="">课程管理</span>
          </router-link>
        </li>
        <li class="side-li side-li-group-another">
          <router-link to="/index/personal" class="side-a">
            <span class="side-icon" style="background-image: url(static/public/images/side-menu/个人资料.png)"></span>
            <span class="">个人资料</span>
          </router-link>

        </li>
        <li class="side-li side-li-group-another">
          <router-link to="/index/security" class="side-a">
            <span class="side-icon" style="background-image: url(static/public/images/side-menu/账号安全.png)"></span>
            <span class="">修改密码</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    computed: {
      getUserName() {
        return this.$store.state.user.nickname
      },
      getPicturePath() {
        return 'http://123.206.80.54:7000/file/download/' + this.$store.state.user.picturePath
      }
    },
    methods: {
      getGetUserName() {
        return this.$store.state.user.nickName
      },
    }
  }
</script>

<style>
  a {
    text-decoration: none !important;
  }
  .side-li {
    border-bottom: 1px solid #133f91;
    height: 50px;
    font-size: 16px;
    /*border-top: 3px solid #3b86cd;*/
  }
  .side-li:hover {
    background-color:#1c5895;
  }
  .side-li-group,.side-li-group-another {
    display: none;
  }
  .side-a {
    display: block;
    padding: 12px 0;
    color: #bae3ff;
    width: 100%;
    text-decoration:none;
  }
  .side-a:hover {
    color: #bae3ff;
    text-decoration: underline;
  }
  .side-a:visited {
    color: #bae3ff;
    text-decoration: underline;
  }
  .side-a:link {
    color: #bae3ff;
    text-decoration: underline;
  }
  .side-icon {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 0 30px;
  }
  .side-icon-another {
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin: 5px 10px;
    float: right;
  }
  .icon-a{
    background-image:url(../assets/images/side-menu/展开.png);
  }
  .icon-b{
    background-image:url(../assets/images/side-menu/收起.png);
  }
  .column {
    width: 200px;
    float: left;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    background-color: #3e7ebf;
  }
  .person-info {
    border-bottom: 1px solid #3478b8;
    padding: 25px;
    color: #fff;
    font-size: 14px;
  }
</style>


